<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*从外到内， 先宽高背景色，放内容调节内容位置 再控制文字细节 */

        .topAny{
            width:1841px ;
            height:178px ;
           background-color: #6abef0;
           margin: 0 0;
        }

        .topName{
            width:1841px;
            height: 116px;
        }

        .topCenter{
            width: 1375px;
            height: 116px;
            margin: 0 233px 0 233px;

        }

        .topCenter a{
            display: inline-block;
            width: 571px;
            height: 73px;
            margin: 14px 0 0 0;
        }

        .topCenter div{
            display: inline-block;
            width: 350px;
            height: 32px;
            padding:0 0 0 130px ;
            
        }

        .topDaoHang{
            width: 1472.8px;
            height: 62px;
            border-top: 1px solid #fff;

        }

        .topAnNiu{
            display: inline-block;
            width: 180;
            height: 62px;
            text-align: center;
            text-decoration: none;
            line-height: 62px;
            font-size: 15px;
            margin: 0 201px 0 201px;
        }

        .topAnNiu li{
            display: inline-block;
            width: 113px;
            height: 62px;
            text-align: center;
            text-decoration: none;
            line-height: 62px;
            font-size: 15px;

        }

        .topAnNiu li a{
            display: inline-block;
            width: 133px;
            height: 62px;
            text-align: center;
            text-decoration: none;
            line-height: 62px;
            font-size: 15px;
            color: black;
        }
        
        .topAnNiu li a:hover{
            background-color: #147fca;
            color: #fff;
        }



    </style>
</head>
<body>
    <div class="topAny">
        <!-- 顶部板块 -->
        <div class="topName">
            <!-- 学院名 -->
            <div class="topCenter">
                <a href="https://mse.jju.edu.cn"> <img src="D:\Web素材\name.png" alt="" title="材料科学与工程学院"></a>
                <div>
                    <input type="text" placeholder="请输入搜索内容...">
                    <img src="D:\Web素材\search.png" alt="" title="搜索">
                </div>
            </div>
        </div>

        <div class="topDaoHang">
            <!--导航 -->
            <ul class="topAnNiu">
                <!-- 导航按钮 -->
                <li>
                    <a href="" title="网站首页">网站首页</a>
                </li>
                <li>                    
                    <a href="" title="学院概况">学院概况</a>
                </li>
                <li>                    
                    <a href="" title="师资队伍">师资队伍</a>
                </li>
                <li>
                    <a href="" title="人才培养">人才培养</a>

                </li>
                <li>
                    <a href="" title="科学科研">科学科研</a>
                </li>
                <li>
                    <a href="" title="学生之家">学生之家</a>
                </li>
                <li>
                    <a href="" title="党群工作">党群工作</a>
                </li>
                <li>
                    <a href="" title="招生就业">招生就业</a>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>